<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是一个首页</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="layui/css/layui.css">

    <style>
        /*头部*/
        .ksd-headerbox {
            height: 200px;
            text-align: center;
            background: url("https://img-u-3.51miz.com/preview/element/00/01/12/38/E-1123861-A28174D6.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/320") #FAFAFA;
            overflow: hidden;
        }
        .ksd-headerbox .title{
            font-size: 28px;}
        .ksd-headerbox .ksd-chead-box {
            width: 680px;
            margin: 0 auto;
            text-align: center;
            padding-top: 20px;
        }

        /*主题内容*/
        .ksd-section{
            margin-top: 100px;
        }
        .ksd-container{}

    </style>
</head>
<body>

    <!--头部-->
    <header>
        <div class="ksd-headerbox">
            <div class="ksd-chead-box">
                <h3 class="title pt30 b">2021年度4月份学相伴学生技术反馈统计排行</h3>
                <p class="pt15">描述：xxxxxxxx</p>
                <div class="pt10 f12">
                    <span class="mr15">参与人数：50</span>
                    <span class="ml15">统计时间：y/m/d hh:mm</span>
                </div>
            </div>
        </div>
    </header>

    <!--主题内容-->
    <section class="ksd-section">
        <div class="layui-container ksd-container">
            <div class="layui-row" style="text-align: center;">
                <div class="layui-col-md12">
                    <div id="main" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
    </section>

    <!--底部-->
    <footer class="mt30">
        <div class="layui-container ksd-container">
            <div class="layui-row">
                <div class="layui-col-md12 tc">
                    <p class="b f20 g6">统计还剩余：？天？小时？分钟？秒？毫秒</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="js/vue.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="echarts/echarts.min.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script>
        // layui.use(['layer', 'form'], function(){
        //     var layer = layui.layer
        //         ,form = layui.form;
        //
        //     layer.msg('Hello World');
        // });
    </script>

</body>
</html>
